@extends('mobile.inc.common')
@section('title')
	<title>{{$archive->title}}</title>
	<meta name="keywords" content="{{$archive->tags()->pluck('name')->implode(',')}}" />
	<meta name="description" content="{{$archive->abstract}}"/>
@endsection
@section('content')
	<link rel="stylesheet" href="{{asset('mobile/css/type-wap.css')}}">
	<script type="text/javascript" src="{{asset('mobile/js/layer.js')}}"></script>
		<div class="pet_mian">
			<!--header-->
			<header class="am-header i-top memmber-top">
				<div class="am-header-left am-header-nav s-blank memmber-blank">
					<a href="javascript:history.go(-1);">
						<img src="{{asset('mobile/images/news/back.png')}}" /> 返回
					</a>

				</div>
				<span class="am-header-title">
          <a class="append-h-title" style="margin-left: 10px;">
           1/{{count($images)}}
          </a>
      </span>
			</header>
			<!--header-->
			<div class="pet_circle-new" style="padding: 0;border: none;margin-top: 49px">
				<!--轮播图-->
				<div id="slideBox" class="slideBox h-tkBox" style="margin-top: 44px">

				<div class="bd">
					<ul>
						@foreach($images as $v)
						<li>
							<a href="#"><img src="{{$v->url.'/raw.jpg'}}" /></a>
						</li>
						@endforeach
					</ul>
				</div>

				<div class="hd h-hb gallery-hb">
					<ul>

					</ul>
				</div>
			</div>
				<script type="text/javascript">
                    $(function() {
                        var _h = $(window).height();
                        var boxH = _h - 49 * 2 - 72 - 44;
                        $(".h-tkBox").height(boxH);

                        $(".h-tkBox .bd li").each(function () {
                            var _this = $(this);
                            _this.find("img").on('load', function () {
                                var imgH = $(this).height();
                                var imgMargin = (boxH - imgH) / 2;


                                console.log(imgH);
                                if (imgH < boxH) {
                                    $(this).css("margin-top", imgMargin);
                                }
                                else {
                                    $(this).attr("style", "margin-top:0px");
                                }

                            })
                        })


                    })

				</script>
			<script type="text/javascript">
				TouchSlide({
					slideCell: "#slideBox",
					titCell: ".hd ul ", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
					mainCell: ".bd ul",
					effect: "leftLoop",
					autoPage: true, //自动分页
					autoPlay: false, //自动播放
					interTime: 5000
				});
                $("#slideBox").on("touchend",function(){
                    $(".h-hb li").each(function(){
                        var _this=$(this);
                        var _length="{{count($images)}}";
                        if(_this.hasClass("on")){
                            var _page=_this.html();
                            $(".append-h-title").html(""+_page+"/"+_length+"");
                        }

                    })
                })

			</script>

			<!-- 图片居中 -->

				<!--轮播图-->

				<div class="am-g h-table-tk">
					<div class="am-u-sm-6" style="padding: 0;">
					<h2 class="am-titlebar-title ">
                                                       {{$archive->title}}
                      </h2>
					<p>
						<span style="float: left; color: #747474;">
                    		{{worldTime(strtotime($archive->updated_at))}}
                    	</span>
					</p>
					</div>					
							<div class="am-u-sm-6" style="margin-top:20px ;">
							<div class="am-u-sm-3"><button class="h-tk-sc"></button></div>
							<script>
								$('.h-tk-sc').on('click', function() {
									layer.open({
										content: '图片收藏成功',
										 style: 'border:none; background:rgba(0,0,0,.3);',
										skin: 'msg',
										time: 2 //2秒后自动关闭
									});
								});
							</script>
							<div class="am-u-sm-3"><button class="h-tk-ly"></button></div>
							<div class="am-u-sm-3"><button class="h-tk-fx" data-am-modal="{target: '#news-share-no-sc'}"></button></div>
							<div class="am-u-sm-3"><button class="h-tk-xz"></button></div>
							<script>
								$('.h-tk-xz').on('click', function() {
									layer.open({
										content: '图片保存成功',
										 style: 'border:none; background:rgba(0,0,0,.3);',
										skin: 'msg',
										time: 2 //2秒后自动关闭
									});
								});
							</script>
						</div>	
				</div>
                @include('mobile.inc.share')
			</div>

@endsection